<html>

<head>
<title>jQuery Tech Day</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script language="javascript" src="scripts/jquery-1.3.2.js"></script>

<script language="javascript">
	
	// taken from: http://bit.ly/bMpZc
	jQuery.fn.fadeToggle = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle'}, speed, easing, callback);
	}
	
	$(setup);
	
	function setup()
	{
		$("#aboutList li span").hide();
		$("#aboutList li a").click(function ()
		{
			$(this).siblings("span").fadeToggle("slow");
		});
	};
	
</script>

</head>

<body>
	<div id="wrapper">
		<div id="banner">
			<h1>jQuery Tech Day</h1>
		</div>
		
		<div id="sideNav">
			<h2>Some Links..</h2>
			<ul>
				<li><a href="http://www.google.co.uk">Google</a></li>
				<li><a href="http://stackoverflow.com">StackOverflow</a></li>
				<li><a href="http://www.dilbert.com">Dilbert</a></li>
				<li><a href="http://thedailywtf.com">TDWTF</a></li>
				<li><a href="http://www.dofactory.com">Data & Object Factory</a></li>
			</ul>
		</div>
		
		<div id="content">
			<h2>Lab 04 - Do Something Sexy!</h2>
			
			<p>
				In this lab I wanted to take a look at working with effects on page elements based on user interaction.
			</p>
			
			<ul id="aboutList" class="noBullet">
				<li><a href="#">About jQuery</a>
				
					<span class="aboutBox">
						<span class="reference">Taken from <a href="http://en.wikipedia.org/wiki/JQuery">http://en.wikipedia.org/wiki/JQuery</a>.</span>
						<a href="http://jquery.com">jQuery</a> is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.
						Dual licensed under the MIT License and the GNU General Public License, jQuery is free, open source software.
					</span>
				</li>
				
				<li><a href="#">About Rob Cooper (robcthegeek)</a>
				
					<span class="aboutBox">
						Rob Cooper is a geek from Southampton, England.
					</span>
				</li>
			</ul>
			
			<div>
				<a href="index.html">Back to Index</a>
			</div>
		</div>
		
		<div id="footer">
			Robert Cooper (<a href="http://twitter.com/robcthegeek">@robcthegeek</a>) from <a href="http://robcthegeek.com">robcthegeek.com</a>
		</div>
	</div>
</body>
</html>